<!--决策处置-->
<template>
  <div class="warnPage">
    <div class="header">
      <!-- <el-row style="height: 100%; width: 100%" :gutter="5">
        <el-col style="height: 100%" :span="8">
          <div class="header_left">
            <div class="header_left_title">事件数</div>
            <div class="header_left_value">162件</div>
          </div>
        </el-col>
        <el-col style="height: 100%" :span="16">
          <div class="header_right">
            <div class="header_right_title">
              <div class="header_right_box">处置中</div>
              <div class="header_right_box">已办结</div>
              <div class="header_right_box" style="border: none">超时</div>
            </div>
            <div class="bottom">
              <div class="bottom-box">46次</div>
              <div class="bottom-box">46次</div>
              <div class="bottom-box" style="border: none">46次</div>
            </div>
          </div>
        </el-col>
      </el-row> -->
    </div>
    <!-- <div @click="clickActive" class="tools">
      <div
        :class="
          isActive.trim() == '事件来源' ? 'tools-box-active' : 'tools-box'
        "
      >
        事件来源
      </div>
      <div
        :class="
          isActive.trim() == '事件状态' ? 'tools-box-active' : 'tools-box'
        "
      >
        事件状态
      </div>
    </div> -->
    <div v-if="isActive.trim() == '事件来源'" class="bottom">
      <div v-for="(temp, index) in eventSourceList" class="row">
        <div v-for="(item, i) in temp" class="col">
          <div
            :style="{ backgroundImage: `url(${item.icon})` }"
            class="col-item"
          >
            <div class="col-item-text">{{ item.value }}</div>
          </div>
          <div class="col-text">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="bottom-status">
      <div
        v-show="isActive.trim() == '事件状态'"
        class="echart"
        ref="mychart"
        id="mychart"
        :style="{ float: 'left', width: '100%', height: '100%' }"
      ></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      isActive: "事件来源",
      myChart: null,
      eventSourceList: [
        [
          {
            name: "低库数量",
            value: "100件",
            icon: require("../../assets/img/decision/ball1.png"),
          },
          {
            name: "借出总数",
            value: "20件",
            icon: require("../../assets/img/decision/ball2.png"),
          },
        ],
        [
          {
            name: "货架空位",
            value: "30个",
            icon: require("../../assets/img/decision/ball3.png"),
          },
          {
            name: "超期总数",
            value: "16件",
            icon: require("../../assets/img/decision/ball4.png"),
          },
        ],
      ],
    };
  },
  watch: {
    isActive(newVal) {
      if (newVal.trim() === "事件状态" && this.$refs.mychart) {
        this.$nextTick(() => {
          console.log("11");
          this.myChart.resize();
        });
      }
    },
  },
  methods: {
    clickActive(e) {
      this.isActive = e.target.textContent;
    },

    initCharts() {
      this.myChart = echarts.init(this.$refs.mychart); // 图标初始化

      let dataX = ["消掏疏浚", "维修维护", "建设改造", "巡查检修", "其他"];
      let dataArr = [200, 334, 390, 330, 220];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: dataX,
            axisTick: {
              show: false,
              alignWithLabel: true,
              lineStyle: {
                color: "#5E87AE", //底部文本的颜色
              },
            },
            axisLine: {
              lineStyle: {
                color: "#5E87AE", //标尺线的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#5E87AE", //文本的颜色 标尺的
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#5E87AE",
              },
            },
          },
        ],
        dataZoom: [
          {
            // type: "slider",
            // show: true,
            // borderColor: "transparent",
            // showDetail: false,
            // realtime: true,
            // maxValueSpan: 3,
            // minValueSpan: 3,
            // textStyle: {
            //   color: "transparent"
            // },
            // filterMode: "empty",
            // bottom: -2,
            // height: 10, //修改滚动条的高度
            // fillerColor: "#f60", //修改滚动条的颜色

            xAxisIndex: 0,
            show: false,
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示五个。
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: dataArr,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#4AC2FF",
                },
                {
                  offset: 1,
                  color: "rgba(155, 232, 255,0.1)",
                },
              ]),
            },
          },
        ],
      };
      let timeOut = null;
      let stopMove = false;
      const stopFn = () => {
        stopMove = true;
        clearInterval(timeOut);
      };
      const goMove = () => {
        stopMove = false;
        autoMove();
      };

      function autoMove() {
        const _that = this;
        timeOut = setInterval(() => {
          if (stopMove) {
            return;
          }
          if (Number(option.dataZoom[0].endValue) === dataX.length - 1) {
            option.dataZoom[0].endValue = 5;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          console.log("this", this.myChart);
          _that.myChart.setOption(option);
        }, 3000);
      }
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
        this.myChart.on("mouseover", stopFn);
        this.myChart.on("mouseout", goMove);
        autoMove();
      }
      this.myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>
<style scoped lang="scss">
.warnPage {
  width: 100%;
  height: 100%;

  .header {
    height: 20%;
    margin-bottom: 10px;
    .header_left {
      height: 100%;
      width: 100%;
      background-image: url("../../assets/img/decision/event_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .header_left_title {
        text-align: center;

        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 18px;
        color: #ffffff;
        line-height: 21px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 20px;
      }
      .header_left_value {
        width: 100%;

        font-family: DIN, DIN;
        font-weight: bold;
        font-size: 26px;
        color: #0ac8fb;
        line-height: 30px;
        text-shadow: 0px 0px 24px #01203a;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .header_right {
      height: 100%;
      width: calc(100% - 10px);
      background-image: url("../../assets/img/decision/header_right.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      //   align-items: center;
      justify-content: center;
      .header_right_title {
        display: flex;
        height: 40%;
        width: 100%;
        background-image: url("../../assets/img/decision/header_right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .header_right_box {
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 33%;
          border-right: 1px dashed #e2e2e2;
        }
      }
      .bottom {
        display: flex;
        height: 60%;
        width: 100%;
        background-image: url("../../assets/img/decision/header_right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .bottom-box {
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 33%;
          border-right: 1px dashed #e2e2e2;
          font-size: 26px;
        }
      }
    }
  }
  .tools {
    height: 10%;
    width: 100%;
    display: flex;
    color: white;
    .tools-box-active {
      width: 30%;
      height: 100%;
      background-image: url("../../assets/img/decision/tools-active.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tools-box {
      width: 30%;
      height: 100%;
      background-image: url("../../assets/img/decision/tools.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bottom {
    height: 70%;
    width: 100%;
    .row {
      width: 100%;
      height: 50%;
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
      .col {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .col-text {
          font-size: 22px;
          color: #b0c0df;
        }
        .col-item {
          width: 130px;
          height: 116px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .col-item-text {
            font-family: DIN, DIN;
            font-weight: bold;
            font-size: 28px;
            color: #f1f1f1;
            line-height: 60px;
            text-shadow: 0px 0px 34px rgba(207, 239, 255, 0.05),
              0px 12px 18px rgba(14, 19, 35, 0.27);
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-bottom: 26px;
            color: linear-gradient(
              90.00000000000026deg,
              #ffd4c9 0%,
              rgba(255, 228, 201, 0) 100%
            );
          }
        }
      }
    }
  }
  .bottom-status {
    height: 70%;
    width: 100%;
  }
}
</style>
